import React from "react"
import queryString from "query-string"
import { observer, inject } from "mobx-react"
@inject("PlaylistStore")
@observer
class Player extends React.Component {
    // constructor(){
    //   super()
    //   this.state={
    //       id:""
    //   }
    // }
    componentDidMount() {
        // console.log(this.props.history)
        let {search}=this.props.history.location
        let id = queryString.parse(search)
        let ids = id
        // console.log(ids)
        // this.props.PlaylistStore.get_music(26620839)
        this.props.PlaylistStore.get_music(ids.id)
        this.props.PlaylistStore.get_song(ids.id)
    }
    back(props){
        this.props.history.go(-1)
    }
    render() {
        // console.log(this.props.PlaylistStore.player_song_store)
        let arr = this.props.PlaylistStore.player_store
        let newArr = this.props.PlaylistStore.player_song_store
        // let a = this.props.PlaylistStore.player_song_store_singer
        // console.log(newArr)
            return (
                <div className="player_container">
                    <div className="player_header">
                        <span onClick={this.back.bind(this)}><svg t="1574127423830" className="player_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5731" width="32" height="32"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" p-id="5732" fill="#dbdbdb"></path></svg></span>
                        {newArr.map((item, index) => <div key={index} className="player_div">
                            <h2 className="player_title" >{item.name}</h2>
                            <h3 className="player_title">{item.ar.name}</h3>
                        </div>)}
                        <span><svg t="1574126586644" className="player_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5348" width="32" height="32"><path d="M995.826307 483.847427a28.415609 28.415609 0 0 0-28.159612 28.159613A455.673734 455.673734 0 1 1 511.99296 56.333305 28.159613 28.159613 0 0 0 511.99296 0.01408a511.99296 511.99296 0 1 0 511.99296 511.99296 27.967615 27.967615 0 0 0-28.159613-28.159613z m26.23964-466.553585a26.751632 26.751632 0 0 0-15.359789-14.719797 21.05571 21.05571 0 0 0-10.879851-2.559965h-287.99604a28.159613 28.159613 0 0 0 0 56.319225h220.156973L488.313286 495.367269a28.159613 28.159613 0 0 0 20.479718 47.99934 27.64762 27.64762 0 0 0 19.839727-8.319886l439.033964-439.033963v220.156973a28.415609 28.415609 0 0 0 28.159612 28.159612 27.967615 27.967615 0 0 0 28.159613-28.159612V28.173693a32.511553 32.511553 0 0 0-1.919973-10.879851z" p-id="5349" fill="#e6e6e6"></path></svg></span>
                    </div>
                    <div className="player_center" className="i">
                        {newArr.map((item,index)=>
                            <img src={item.al.picUrl} key={index} className="player_pic"/>
                        )}
                    </div>
                    <div className="player_bottom">
                        {arr.map((item, index) => <audio key={index} src={item.url} controls="controls" loop className="player_audio"/>)}
                    </div>
                </div>

            )

    }
}
export default Player